<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
    <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
        id="bd-theme"
        type="button"
        aria-expanded="false"
        data-bs-toggle="dropdown"
        aria-label="Toggle theme (auto)">
    <i class="bi bi-circle-half my-1 theme-icon-active"></i>
    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
    <li>
        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
            <i class="bi bi-brightness-high-fill me-2 opacity-50"></i>
            Light
            <i class="bi bi-check2 ms-auto d-none"></i>
        </button>
    </li>
    <li>
        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
            <i class="bi bi-moon-stars-fill me-2 opacity-50"></i>
            Dark
            <i class="bi bi-check2 ms-auto d-none"></i>
        </button>
    </li>
    <li>
        <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
            <i class="bi bi-circle-half me-2 opacity-50"></i>
            Auto
            <i class="bi bi-check2 ms-auto d-none"></i>
        </button>
    </li>
    </ul>
</div>
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand d-md-none" href="{{ route('home') }}">
        <i class="bi bi-amd"></i>
        {{ $systemConfig['site_name'] }}
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav flex-grow-1 justify-content-between">
          <li class="nav-item"><a class="nav-link" href="{{ route('home') }}"><span class="text-primary me-1">台湾</span><span class="bg-primary text-white rounded-2 px-2 py-1 fs-6">CMS</span></a></li>
          <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          @guest
          <li class="nav-item"><a class="nav-link" href="{{ route('login', ['accountType' => 'personal']) }}" title="会员登陆"><i class="bi bi-person-fill"></i></li>
          @else
          <li class="nav-item dropdown">
              <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                  {{ Auth::user()->name }}
              </a>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="{{ route('auth.profile', ['accountType' => 'personal']) }}"><i class="bi bi-person-circle me-1"></i>个人资料</a>
                  <a class="dropdown-item" href="{{ route('auth.password.change', ['accountType' => 'personal']) }}"><i class="bi bi-key me-1"></i>修改密码</a>
                  <a class="dropdown-item" href="{{ route('auth.logout', ['accountType' => 'personal']) }}"><i class="bi bi-door-closed me-1"></i>退出</a>
              </div>
          </li>
          @endguest
        </ul>
      </div>
    </div>
  </div>
</nav>
